<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>产品管理</title>
    <base href="<%=basePath%>">
    <style type="text/css">
        #div1 {
            margin-left: 36px;
            margin-top: 20px;
        }
        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 92%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
        }
        th {
            text-align: center;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ddd
        }
        .td1 {
            text-align: center;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ddd
        }
        img {
            width: 60px;
            height: 50px;
        }
        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
            border-top-color: inherit;
            border-right-color: inherit;
            border-bottom-color: inherit;
            border-left-color: inherit;
        }
        #table1 {
            border-spacing: 0;
            border-collapse: collapse;
            width: 1400px;
        }
    </style>
    <script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function loadProducts() {
            $.ajax({
                url: "product/queryProductByName",
                data: {
                    userName: "${userName}"
                },
                dataType: "json",
                success: function (data) {
                    $("#content").empty()
                    $.each(data, function (i, n) {
                       $("#content").append("<tr>")
                            .append("<td class='td1'>" + n.id + "</td>")
                            .append("<td class='td1'><img src='static/images/ex2.jpg' </td>")
                            .append("<td class='td1'>" + n.content + "</td>")
                            .append("<td class='td1'>" + n.category + "</td>")
                            .append("<td class='td1'>￥" + n.oldPrice + "</td>")
                            .append("<td class='td1'>￥" + n.price + "</td>")
                            .append("<td class='td1'>" + n.nums + "</td>")
                            .append("<td class='td1'>" +
                                "<a href='product/updateProduct?id=" + n.id + "' style='text-decoration: none; color: #FF5555'>" +
                                "<button style='padding: 3px 6px; background-color: lightpink; color: white; " +
                                "cursor: pointer; font-size: 16px; border: 1px solid skyblue'>编辑</button>" +
                                "</a></td>")
                            .append("<td class='td1'>" +
                                "<a href='product/removeProduct?id=" + n.id + "' style='text-decoration: none; color: #FF5555' onclick='return confirm(\"确定要撤销该物品的发布吗？\")'>" +
                                "<button style='padding: 3px 6px; background-color: palevioletred; color: snow; " +
                                "cursor: pointer; font-size: 16px; border: 1px solid skyblue'>删除</button>" +
                                "</a></td>")
                            .append("</tr>")
                    })
                }
            })
        }

        $(function () {
            loadProducts()
            $("#commitBtn").click(function () {
                if ($("#content1").val().trim()==="" || $("#category").val().trim()==="" ||
                    $("#oldPrice").val().trim()==="" || $("#price").val().trim()==="" ||
                    $("#nums").val().trim()==="") {
                    alert("物品发布失败，请确定物品信息是否填写完整！")
                } else if (isNaN($("#oldPrice").val().trim()) || isNaN($("#price").val().trim())) {
                    alert("请正确填写价格")
                } else if (parseInt($("#nums").val().trim())!= $("#nums").val().trim()) {
                    alert("物品数量必须是整数")
                } else {
                    var data = $("#commitForm").serialize();
                    $.ajax({
                        type: "post",
                        url: "product/addProduct",
                        dataType: "text",
                        data: data,
                        success: function (resp) {
                            alert(resp)
                            loadProducts()
                            $("#content1").val()
                            $("#category").val()
                            $("#oldPrice").val()
                            $("#price").val()
                            $("#nums").val()
                        }
                    })
                }
            })
        })
    </script>
</head>
<body style="background-color: #fff">
    <div id="div1">
        <h1 style="background-color: #5bc0de;" class="label">物品管理</h1>
        <br><br>
        <div>
            <table style="border: 1px solid #ddd;" id="table1">
                <thead style="background-color: #DFF0D8">
                   <tr style="height: 30px">
                       <th>ID</th>
                       <th>图片</th>
                       <th>物品内容</th>
                       <th>物品类别</th>
                       <th>原价格</th>
                       <th>优惠价格</th>
                       <th>库存数量</th>
                       <th colspan="2" align="center">操作</th>
                   </tr>
                </thead>
                <tbody id="content">

                </tbody>
            </table>
        </div>
    </div>
    <br><br>
    <div align="center">
        <form id="commitForm">
            <table style="line-height: 30px; width: 400px;
            border: 1px solid #faebcc">
                <tr style="color: #8a6d3b;
                           background-color: #fcf8e3;
                           border: 1px solid #faebcc;"
                    align="center">
                    <td colspan="2">发布物品</td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>物品内容</td>
                    <td><input type="text" id="content1" name="content"></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>物品类别</td>
                    <td><input type="text"  id="category" name="category"></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>原价格</td>
                    <td><input type="text" id="oldPrice" name="oldPrice"></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>优惠价格</td>
                    <td><input type="text" id="price" name="price"></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>库存数量</td>
                    <td><input type="text" id="nums" name="nums"></td>
                </tr>
                <tr style="line-height: 60px">
                    <td colspan="2" align="center">
                        <input type="button" id="commitBtn" style="
                          color: #fff; width: 80px; margin: 10px;
                          background-color: #5cb85c;
                          border-color: #4cae4c;
                          font-size: 18px;
                          font-weight: 400;
                          display: inline-block;
                          padding: 6px 12px;cursor: pointer;" value="提交">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>
